<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 使用三元表达式 ? : -->
      <!-- 三元表达式可以看成if...else...语句 -->
      <!-- 如果值为true 结果为 ? 后面的值  -->
      <!-- 如果值为flase 结果为 ： 后面的值 -->
      <!-- 补充 1 为 true 0为false -->
      <div>性别：{{sex==1?'男':'女'}}</div>
      <div>小计：{{(price*count).toFixed(2)}}</div>
      <div>星期：{{week[day]}}</div>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: "#app",
      data: {
        sex: 1,
        price: 2.5,
        count: 2,
        day: 1,
        week: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
      },
    });
  </script>
</html>
